<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:29:08
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-27 15:05:45
 * @FilePath: \web-pc\src\pages\big-screen\components\echart\index.vue
-->
<template>
  <div class="checkcontent">
    <template v-if="isTable">
      <span>
        <slot name="left"></slot>
      </span>
      <div  v-for="(item, index) in checkList" :key="index" class="checkbox" :style="'background: ' + item.background" @click="onCheck(item.label)">
        <div class="box">
          <svg
            v-if="value.includes(item.label)"
            :style="'color: ' + item.color"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 1024 1024"
          >
            <path
              fill="currentColor"
              d="M77.248 415.04a64 64 0 0 1 90.496 0l226.304 226.304L846.528 188.8a64 64 0 1 1 90.56 90.496l-543.04 543.04-316.8-316.8a64 64 0 0 1 0-90.496z"
            ></path>
          </svg>
        </div>
        <div class="title">{{item.label}}</div>
      </div>
      <span>
        <slot name="right"></slot>
      </span>
    </template>
    <template v-else>
      <span>
        <slot name="left"></slot>
      </span>
      <div v-for="(item, index) in checkList1" :key="index" class="checkbox" :style="'background: ' + item.background+';' + (index > 2 && !isSearch ? 'padding: 3px 8px 3px 4px;border: 2px solid ' +  item.color: '')" @click="onCheck(item.label)">
        <div class="box" :style="index > 2 || isSearch ? 'background: #f5f7fb;' : ''">
          <svg
            v-if="value.includes(item.label)"
            :style="'color: ' + item.color"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 1024 1024"
          >
            <path
              fill="currentColor"
              d="M77.248 415.04a64 64 0 0 1 90.496 0l226.304 226.304L846.528 188.8a64 64 0 1 1 90.56 90.496l-543.04 543.04-316.8-316.8a64 64 0 0 1 0-90.496z"
            ></path>
          </svg>
        </div>
        <div class="title">{{item.label}}</div>
      </div>
      <span>
        <slot name="right"></slot>
      </span>
    </template>
  </div>
</template>

<script>
export default {
  name: "check",
  props: {
    checkList: {
      type: Array,
      default: () => [
        {
          label: "中长期",
          background: "#deeefd",
          color: "#017efa",
        },
        {
          label: "日前",
          background: "#dbf9ff",
          color: "#34c1fd",
        },
        {
          label: "实时",
          background: "#dff7ec",
          color: "#30d887",
        },
        {
          label: "结算",
          background: "#f6edff",
          color: "#a258f0",
        },
      ],
    },
    checkList1: {
      type: Array,
      default: () => [
        {
          label: "中长期电量",
          background: "#dfeffe",
          color: "#027ffa",
        },
        {
          label: "日前电量",
          background: "#dbf9ff",
          color: "#32c0fd",
        },
        {
          label: "实时电量",
          background: "#dff7ec",
          color: "#30d887",
        },
        {
          label: "中长期电价",
        //   background: "#f6edff",
          color: "#027ffa",
        },
        {
          label: "日前电价",
        //   background: "#f6edff",
          color: "#32c0fd",
        },
        {
          label: "实时电价",
        //   background: "#f6edff",
          color: "#30d887",
        },
      ],
    },
    value: {
      type: Array,
      default: () => [],
    },
    isTable: {
      type: Boolean,
      default: true,
    },
    isSearch: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      chart: null,
      checked: ['中长期'],
    };
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    onCheck(val){
        const ll = [...this.value]
        let rLL = []
        if (ll.includes(val)) {
            rLL = ll.filter(v => v!== val)
        }else{
            ll.push(val)
            rLL = ll
        }
        this.$emit('input', rLL)
    }
  },
};
</script>

<style lang="scss" scope>
/* 整个滚动条轨道（背景） */
.checkcontent::-webkit-scrollbar {
  width: 10px;              /* 垂直滚动条宽度 */
  height: 10px;             /* 水平滚动条高度 */
}

/* 滚动条轨道（背景区域） */
.checkcontent::-webkit-scrollbar-track {
  background: #f1f1f1;      /* 浅灰色轨道 */
  border-radius: 10px;      /* 圆角 */
}

/* 滚动条滑块（可拖动部分） */
.checkcontent::-webkit-scrollbar-thumb {
  background: #c1c1c1;      /* 中灰色滑块 */
  border-radius: 10px;      /* 圆角 */
  border: 2px solid #f1f1f1; /* 与轨道同色的边框（视觉留白） */
}

/* 滑块悬停效果 */
.checkcontent::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;      /* 深灰色悬停效果 */
}

.checkcontent{
    display: flex;
    align-items: center;
    // max-width: 600px;
    overflow: auto;
}
.checkbox {
  display: flex;
  align-items: center;
  padding: 4px 8px 4px 4px;
  // background: #deeefd;
  border-radius: 4px;
  margin-left: 8px;
  cursor: pointer;
  .title {
    margin-left: 8px;
    text-wrap: nowrap;
  }
}
.box {
  width: 20px;
  height: 20px;
  background: white;
  text-align: center;
  border-radius: 2px;
  svg {
    width: 16px;
    height: 16px;
    // color: red;
    margin-top: 2px;
  }
}
.datashow{
  margin-right: 8px;
  position: relative;
  top: 2px;
}
</style>
